import React from 'react'
import {withRouter} from 'react-router-dom'
import './index.less'

import addresjson from './addres.json';

class Login extends React.Component {
    state = {
        adresVal: [],
        checkey: true,
        addres: {},
        addrestext: '1',
        addrestype: 0
    };

    componentWillMount() {
        this.state.addres = addresjson
    }

    componentDidMount() {//每次进入登录页清除之前的登录信息

    }

    checkloca(type, e) {
        const adresArr = this.state.adresVal;
        adresArr.push(e.currentTarget.childNodes[0].innerHTML)
        if(type===2){
            this.setState({
                adresVal: adresArr,
                addrestype: 0
            });
            this.props.locaTextfun(this.state.adresVal)
            this.props.locakeyfun(false)
            this.setState({
                adresVal: [],
                addres: addresjson
            });
            return
        }
        this.setState({
            addrestext: e.currentTarget.childNodes[0].innerHTML
        });

        if (type === 0) {
            this.state.addres.map((item) => {
                if(item.name===e.currentTarget.childNodes[0].innerHTML){
                    this.setState({
                        addres: item.children
                    });
                }
            });
            this.setState({
                adresVal: adresArr,
                addrestype: 1
            });
        }else if(type === 1){
            this.state.addres.map((item, index) => {
                if(item.name===e.currentTarget.childNodes[0].innerHTML){
                    this.setState({
                        addres: item.children
                    });
                }
            });
            this.setState({
                adresVal: adresArr,
                addrestype: 2
            });
        }
    }

    close = () => {
        this.props.locakeyfun(false)//这个地方把值传递给了props的事件当中
    }

    submit = () => {
        this.props.locakeyfun(false)//这个地方把值传递给了props的事件当中
    }

    render() {
        return (
            <div>
                {
                    this.props.locakey ? (
                        <div className="location">
                            <div key="amache" className={'lobox  animate__animated animate__slideInUp animate__faster'}>
                                <h1>
                                    <span onClick={this.close}>取消</span>
                                    <i>请选择地址</i>
                                    <span onClick={this.submit}>确认</span>
                                </h1>
                                <h2>
                                    {this.state.adresVal.map((item, index) =>
                                        <span key={index}>{item}</span>
                                    )}
                                    {
                                        this.state.checkey ? (
                                            <i>请选择</i>
                                        ) : null
                                    }
                                </h2>

                                <div className='list'>
                                    <ul>
                                        {
                                            this.state.addres.map((item, index) => {
                                                return <li key={index} onClick={this.checkloca.bind(this, this.state.addrestype)}><span>{item.name}</span></li>
                                            })
                                        }
                                    </ul>
                                </div>
                            </div>
                        </div>
                    ) : null
                }
            </div>
        )
    }
}

export default withRouter(Login)
